<!-- 新增框 -->
<template>
	<div class="center"><div class="center-column" :style="[{
		width: width + 'px', height: height + 'px',
		color: textColor || core.theme.color.lighter, fontSize: core.theme.fontSize('smaller'),
		borderRadius: radius + 'px', border: `1px dashed ${bgColor || core.theme.color.lighter}`
	}, custStyle]" @click="$emit('click')">
		<slot name="add-icon">
			<div :style="[{position: 'relative', width: addSize + 'px', height: addSize + 'px'}, {margin: `5px 10px`}]">
				<div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" class="center">
					<div :style="[{width: '15%', height: '100%', backgroundColor: bgColor || core.theme.color.lighter}]"/>
				</div>
				<div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" class="center">
					<div :style="[{width: '100%', height: '15%', backgroundColor: bgColor || core.theme.color.lighter}]"/>
				</div>
			</div>
		</slot>
		<slot name="add-text">
			<CaLabel v-if="text" :text="text"/>
		</slot>
	</div></div>
</template>

<script>
	
	import base from '@/components/index.vue'
	
	export default {
		extends: base,
		props: {
			width: {
				type: [Number, String],
				default: 80
			},
			height: {
				type: [Number, String],
				default: 80
			},
			radius: {
				type: [Number, String],
				default: 6
			},
			text: String,
			textColor: {
				type: String,
				default: '#999999'
			},
			bgColor: {
				type: String,
				default: '#dbdbdb'
			},
			custStyle: Object
		},
		watch: {
			width(value) {
				this.initial()
			},
			height(value) {
				this.initial()
			}
		},
		data() {
			return {
				// 中间加号的大小。宽度或者高度是其五分之一
				addSize: 20
			}
		},
		mounted() {
			this.initial()
		},
		methods: {
			initial() {
				var res = this.height
				if (this.width < this.height) {
					res = this.width
				}
				res = res * 0.5
				if (res > 20) {
					res = 20
				}
				if (res < 10) {
					res = 10
				}
				this.addSize = res
			}
		}
	}
</script>

<style>
</style>